<template>
    <div>
        <el-dialog :visible.sync="state" width="80%" :show-close=false>
            <div class="box">
                <el-row>
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="12">
                                <div class="box_img">
                                    <!-- <img src="../assets/images/delete.png" class="box_icon" @click="deleteImg(1)"
                                        v-if="img1" /> -->
                                    <el-image style="width: 100%; height: 100%" :src="url1" :preview-src-list="srcList"
                                        v-if="img1">
                                    </el-image>
                                    <div style="width: 100%; height: 100% ;display: flex;justify-content: center;align-items: center;cursor: pointer;"
                                        v-if="!img1" @click="upImage('1')">
                                        <el-image style="width: 30%; height: 30%" :src="require('../assets/images/add.png')"
                                            v-if="!dcm1">
                                        </el-image>
                                        <div style="width:250px;height: 250px;" v-if="dcm1">
                                            <Cornerstone :img="dcmImg1"></Cornerstone>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="box_img">
                                    <!-- <img src="../assets/images/delete.png" class="box_icon" @click="deleteImg(2)"
                                        v-if="img2" /> -->
                                    <el-image style="width: 100%; height: 100%" :src="url2" :preview-src-list="srcList"
                                        v-if="img2">
                                    </el-image>
                                    <div style="width: 100%; height: 100% ;display: flex;justify-content: center;align-items: center;cursor: pointer;"
                                        v-if="!img2" @click="upImage('2')">
                                        <el-image style="width: 30%; height: 30%" :src="require('../assets/images/add.png')"
                                            v-if="!dcm2">
                                        </el-image>
                                        <div style="width:250px;height: 250px;" v-if="dcm2">
                                            <Cornerstone :img="dcmImg2"></Cornerstone>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <div class="box_img">
                                    <div class="box_img">
                                        <!-- <img src="../assets/images/delete.png" class="box_icon" @click="deleteImg(3)"
                                            v-if="img3" /> -->
                                        <el-image style="width: 100%; height: 100%" :src="url3" :preview-src-list="srcList"
                                            v-if="img3">
                                        </el-image>
                                        <div style="width: 100%; height: 100% ;display: flex;justify-content: center;align-items: center;cursor: pointer;"
                                            v-if="!img3" @click="upImage('3')">
                                            <el-image style="width: 30%; height: 30%"
                                                :src="require('../assets/images/add.png')" v-if="!dcm3">
                                            </el-image>
                                            <div style="width:250px;height: 250px;" v-if="dcm3">
                                                <Cornerstone :img="dcmImg3"></Cornerstone>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="box_img">
                                    <!-- <img src="../assets/images/delete.png" class="box_icon" @click="deleteImg(4)"
                                        v-if="img4" /> -->
                                    <el-image style="width: 100%; height: 100%" :src="url4" :preview-src-list="srcList"
                                        v-if="img4">
                                    </el-image>
                                    <div style="width: 100%; height: 100% ;display: flex;justify-content: center;align-items: center;cursor: pointer;"
                                        v-if="!img4" @click="upImage('4')">
                                        <el-image style="width: 30%; height: 30%;"
                                            :src="require('../assets/images/add.png')" v-if="!dcm4">
                                        </el-image>
                                        <div style="width:250px;height: 250px;" v-if="dcm4">
                                            <Cornerstone :img="dcmImg4"></Cornerstone>
                                        </div>
                                    </div>


                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <div id="main" class="chat" v-if="type == 1"></div>
                        <div id="main1" class="chat" v-if="type == 1"></div>
                        <div id="main2" class="chat" v-if="type == 2"></div>
                    </el-col>

                </el-row>
            </div>
            <div class="fotter">
                <el-button type="primary" @click="dialogVisible()">关闭</el-button>
            </div>
            <el-dialog width="80%" title="加载图件" :visible.sync="imgDialog" append-to-body>
                <div>
                    <el-row>
                        <el-col :span="8">
                            <div class="alertBox">
                                <div style="margin-top: 20px;">
                                    <span>图件类型：</span>
                                    <el-select v-model="imgType" filterable allow-create default-first-option
                                        placeholder="请选择图件类型" style="width:150px;margin-left: 10px;"
                                        @change="imgTypechange">
                                        <el-option v-for="  item   in   imgTypeList  " :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div style="margin-top: 20px;margin-left:10px" v-if="imgTypes">
                                    <span>图件名称：</span>
                                    <el-select v-model="imgName" filterable allow-create default-first-option
                                        placeholder="请选择图件名称" style="width:150px;margin-left: 10px;"
                                        @change="imgNamechange">
                                        <el-option v-for="  item   in   imgNameList  " :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div v-if="!imgTypes">
                                <el-form ref="form" :model="form" label-width="80px" class="search">
                                    <el-form-item label="顶深(m)">
                                        <el-input v-model="form.topDepth" placeholder="顶深" type="number"
                                            style="width:150px" />
                                    </el-form-item>
                                    <el-form-item label="底深(m)">
                                        <el-input v-model="form.bottomDepth" placeholder="底深" type="number"
                                            style="width:150px" />
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" size="large" class="btnSty"
                                            @click="searchDcm">查询</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div style="margin-left:10px" v-if="!imgTypes">
                                <el-table :data="tableData" style="width: 100%" @row-click="rowClick" :height="200">
                                    <el-table-column prop="fileName" label="图件名称" width="300">
                                    </el-table-column>
                                    <el-table-column prop="topDepth" label="顶部深度">
                                    </el-table-column>
                                </el-table>
                                <el-pagination background layout="prev, pager, next" :total="total1"
                                    @current-change="handleCurrentChange">
                                </el-pagination>
                            </div>
                        </el-col>
                        <el-col :span="16">
                            <div style="width:100%;text-align: center;margin-bottom: 10px;">图件预览</div>
                            <div style="width: 100%;height: 300px;display: flex;justify-content: center;" v-if="img5">
                                <div class="up_img">暂无</div>
                            </div>
                            <div style="width: 100%; height: 100% ;display: flex;justify-content: center;align-items: center;cursor: pointer;"
                                v-if="!img5">
                                <div style="width:300px;height: 300px;" v-if="isDcm">
                                    <Cornerstone :img="dcmImg" v-if="isDcmTrue"></Cornerstone>
                                </div>
                                <el-image style="width: 300px; height: 300px;" :src="dcmImg" v-if="!isDcm">
                                </el-image>

                            </div>
                        </el-col>
                    </el-row>
                    <div style="width:100%;display: flex;justify-content: center;margin-top: 20px;">
                        <el-button type="primary" @click="upImageInfo()">确定</el-button>
                    </div>

                </div>
            </el-dialog>
        </el-dialog>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import Cornerstone from './components/icons/cornerstone.vue';
import { listPost, getSmallList, sliceFileDownload, dcmDowlode } from "@/api/system/post";
import axios from 'axios';

export default {
    props: {
        state: {
            type: Boolean,
            default: false
        },
        info: {
            type: Object,
            default: {}

        },
        allValue: {
            type: Object,
            default: {}
        },
    },
    data() {
        return {
            type: 1,
            url1: '',
            url2: '',
            url3: '',
            url4: '',
            srcList: [

            ],
            img1: true,
            img2: true,
            img3: false,
            img4: false,
            img5: true,
            imgDialog: false,
            imgType: '',
            imgName: '',
            imgTypeList: [{ label: '岩心照片', value: '1' }, { label: '扫描图件', value: '2' }],
            imgNameList: [],
            dcmImg: '',
            dcmImg1: '',
            dcmImg2: '',
            dcmImg3: '',
            dcmImg4: '',
            isDcm: false,
            isDcmTrue: false,
            dcm1: false,
            dcm2: false,
            dcm3: false,
            dcm4: false,
            imgNum: '',
            upImgType: 'img',
            chartList1: {},
            infoValue: {},
            tableData: [],
            total1: 0,
            imgTypes: true,
            form: {
                topDepth: '',
                bottomDepth: '',
                pageNo: 1
            }
        }
    },
    watch: {
        info: {
            immediate: true,
            deep: true,
            handler(newVlue, oldValue) {
                this.chartList1 = newVlue
                this.init()

            }
        },
        allValue: {
            immediate: true,
            deep: true,
            handler(newVlue, oldValue) {
                console.log(newVlue, 33333333)
                this.infoValue = newVlue
                this.type = newVlue.dataCategory
                if (newVlue.coreImageFileList) {
                    if (newVlue.coreImageFileList[0]) {
                        console.log(newVlue.coreImageFileList[0].location)
                        this.url1 = newVlue.coreImageFileList[0].location
                        this.img1 = true
                    } else {
                        this.img1 = false
                    }
                    if (newVlue.coreImageFileList[1]) {
                        this.url2 = newVlue.coreImageFileList[1].location
                        this.img2 = true
                    } else {
                        this.img2 = false
                    }
                    if (newVlue.coreImageFileList[2]) {
                        this.ur3 = newVlue.coreImageFileList[2].location
                        this.img3 = true
                    } else {
                        this.img3 = false
                    }
                    if (newVlue.coreImageFileList[3]) {
                        this.url4 = newVlue.coreImageFileList[3].location
                        this.img4 = true
                    } else {
                        this.img4 = false
                    }


                }
            }
        },
    },
    components: { Cornerstone },
    methods: {
        // 分页
        handleCurrentChange(val) {
            this.form.pageNo = val
            this.searchDcm()
        },
        // dcm文件搜索
        searchDcm() {
            let obj = {
                beginTopDepth: this.form.topDepth,
                endTopDepth: this.form.bottomDepth,
                pageSize: 10,
                pageNo: this.form.pageNo,
                archiveId: this.infoValue.id,
                fileType: 2,
            }
            dcmDowlode(obj).then((res) => {
                console.log(res)
                this.tableData = res.data.list
                this.total1 = res.data.total
            })
        },
        //列表行点击
        rowClick(row) {
            this.img5 = false
            console.log(row, 1111)
            this.upImgType = 'dcm'
            console.log(this.imgNum, 2222)
            if (this.imgNum == '1') {
                this.getFile(row.fileId, 1)
            } else if (this.imgNum == '2') {
                this.getFile(row.fileId, 2)
            } else if (this.imgNum == '3') {
                this.getFile(row.fileId, 3)
            } else if (this.imgNum == '4') {
                this.getFile(row.fileId, 4)
            }
        },
        dialogVisible() {
            this.$emit('stateChange')
        },
        init() {
            this.$nextTick(() => {
                if (this.type == 1) {
                    this.chart1()
                    this.chart2()
                } else if (this.type == 2) {
                    this.chart3()
                }

            })
        },
        chart1() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '孔隙度统计直方图',
                    textStyle: {
                        fontWeight: 'bold',
                        fontSize: '16'
                    },
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: this.chartList1.name,
                    name: '孔隙度(%)',
                    nameLocation: 'center',
                    nameTextStyle: {
                        fontWeight: "bold",
                        lineHeight: 56,
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '频率(个)',
                    nameLocation: 'center',
                    nameTextStyle: {
                        fontWeight: "bold",
                        lineHeight: 56,
                    }
                },
                series: [
                    {
                        data: this.chartList1.value,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',//在上方显示
                        },
                        barWidth: 20
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        chart2() {
            var chartDom = document.getElementById('main1');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '渗透率统计直方图',
                    textStyle: {
                        fontWeight: 'bold',
                        fontSize: '16'
                    },
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: this.chartList1.name1,
                    name: '渗透率(mD)',
                    nameLocation: 'center',
                    nameTextStyle: {
                        fontWeight: "bold",
                        lineHeight: 56,
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '频率(个)',
                    nameLocation: 'center',
                    nameTextStyle: {
                        fontWeight: "bold",
                        lineHeight: 56,
                    }
                },
                series: [
                    {
                        data: this.chartList1.value1,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',//在上方显示
                        },
                        barWidth: 20
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        chart3() {
            var chartDom = document.getElementById('main2');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '矿物含量统计直方图',
                    textStyle: {
                        fontWeight: 'bold',
                        fontSize: '16'
                    },
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['石英', '长石', '方解石', '白云石', '粘土矿物', '其他矿物'],
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '含量(%)',
                    nameLocation: 'center',
                    nameTextStyle: {
                        fontWeight: "bold",
                        lineHeight: 56,
                    }
                },
                series: [
                    {
                        data: [38.9, 2.83, 0.2, 0, 58.9, 0.32],
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',//在上方显示
                        },
                        barWidth: 20
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        handleRemove1(file, fileList) {
        },
        handlePictureCardPreview1(file) {
            this.img5 = false
        },
        handleRemove2(file, fileList) {
        },
        handlePictureCardPreview2(file) {

        },
        handleRemove3(file, fileList) {
            ;
        },
        handlePictureCardPreview3(file) {

        },
        handleRemove4(file, fileList) {
        },
        handlePictureCardPreview4(file) {

        },
        deleteImg(type) {
            if (type == 1) {

            } else if (type == 2) {

            } else if (type == 3) {

            } else if (type == 4) {

            }
        },
        upImage(info) {
            this.imgNum = info
            this.imgType = ''
            this.imgName = ''
            this.dcmImg = ''
            this.img5 = true
            this.imgDialog = true
            this.form = {
                topDepth: '',
                bottomDepth: '',
                pageNo: 1
            }
            this.tableData = []
        },
        // 图像类型选择
        imgTypechange(e) {
            if (e == '1') {
                this.imgTypes = true
                this.imgNameList = []
                this.imgName = ''
                let obj = {
                    archiveId: this.infoValue.id,
                    fileType: e
                }
                getSmallList(obj).then(response => {
                    let list = JSON.parse(JSON.stringify(response.data))
                    list.map((res) => {
                        res.label = res.fileName
                        res.value = res.fileId
                    })
                    this.imgNameList = list;


                });
            } else {
                this.imgTypes = false

            }
        },
        imgNamechange(e) {
            this.img5 = false
            this.imgNameList.map((res) => {
                if (res.value == e) {
                    let result = res.label.split('.').pop();
                    if (result == 'dcm') {
                        this.upImgType = 'dcm'
                        if (this.imgNum == '1') {
                            this.getFile(res.fileId, 1)
                        } else if (this.imgNum == '2') {
                            this.getFile(res.fileId, 2)
                        } else if (this.imgNum == '3') {
                            this.getFile(res.fileId, 3)
                        } else if (this.imgNum == '4') {
                            this.getFile(res.fileId, 4)
                        }
                    } else {
                        this.upImgType = 'img'

                        if (this.imgNum == '1') {
                            this.getFile(res.fileId, 1)
                        } else if (this.imgNum == '2') {
                            this.getFile(res.fileId, 2)
                        } else if (this.imgNum == '3') {
                            this.getFile(res.fileId, 3)
                        } else if (this.imgNum == '4') {
                            this.getFile(res.fileId, 4)
                        }
                    }

                } else {
                    return
                }
            })

        },
        upImageInfo() {
            this.imgDialog = false
            if (this.upImgType == 'img') {
                if (this.imgNum == '1') {
                    this.img1 = true
                    this.dcm1 = false
                } else if (this.imgNum == '2') {
                    this.img2 = true
                    this.dcm2 = false
                } else if (this.imgNum == '3') {
                    this.img3 = true
                    this.dcm3 = false
                } else if (this.imgNum == '4') {
                    this.img4 = true
                    this.dcm4 = false
                }
            } else {
                if (this.imgNum == '1') {
                    this.img1 = false
                    this.dcm1 = true
                } else if (this.imgNum == '2') {
                    this.img2 = false
                    this.dcm2 = true
                } else if (this.imgNum == '3') {
                    this.img3 = false
                    this.dcm3 = true
                } else if (this.imgNum == '4') {
                    this.img4 = false
                    this.dcm4 = true
                }
            }

        },
        // 循环下载文件
        getFile(id, type) {
            this.isDcmTrue = false
            sliceFileDownload(id).then((res) => {
                let list = []
                if (res.data.partList) {
                    res.data.partList.map((item) => {
                        let instance = axios.create({
                            responseType: 'blob',
                        })
                        instance.get(`${item.fileDownloadUrl}`).then((info) => {
                            list.push(info.data)
                            if (res.data.partCount == list.length) {
                                let blob = new Blob(list);
                                let link = document.createElement('a');
                                link.href = window.URL.createObjectURL(blob);
                                this.dcmImg = link.href
                                console.log(this.isDcm, 11111111)
                                if (this.upImgType == 'img') {
                                    if (type == 1) {
                                        this.url1 = link.href
                                    } else if (type == 2) {
                                        this.url2 = link.href
                                    } else if (type == 3) {
                                        this.url3 = link.href
                                    } else if (type == 4) {
                                        this.url4 = link.href
                                    }
                                    this.isDcm = false
                                    this.isDcmTrue = false
                                } else {
                                    console.log(link.href, 33333)
                                    if (this.imgNum == '1') {
                                        this.dcmImg1 = link.href
                                    } else if (this.imgNum == '2') {
                                        this.dcmImg2 = link.href
                                    } else if (this.imgNum == '3') {
                                        this.dcmImg3 = link.href
                                    } else if (this.imgNum == '4') {
                                        this.dcmImg4 = link.href
                                    }
                                    this.isDcm = true
                                    this.isDcmTrue = true
                                }

                            }
                        })

                    })
                }
            })
        },
    }

}
</script>
<style scoped>
.alertBox {
    display: flex;
}

.search {
    margin-top: 30px;
    margin-left: 10px;
    display: flex;
    width: 100%;
}

.up_img {
    font-size: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    width: 100%;
    height: 600px;



    .box_img {
        width: 250px;
        height: 250px;
        margin-bottom: 20px;
        position: relative;

        .box_up {
            position: absolute;
            left: 20%;
            top: 20%;
        }

        .box_icon {
            position: absolute;
            right: 1%;
            top: 1%;
            z-index: 20;
            display: inline-block;
            width: 25px;
            height: 25px;
            cursor: pointer;
        }
    }

    .chat {
        width: 100%;
        height: 300px;
    }
}

.fotter {
    width: 100%;
    text-align: center
}
</style>